<template>
  <view>
    <view class="tab">
      <view
        class="tab-item"
        :class="{ active: currentTabIndex == 0 }"
        @click="changeTab(0)"
        >资金</view
      >
      <view
        class="tab-item"
        :class="{ active: currentTabIndex == 1 }"
        @click="changeTab(1)"
        >历史</view
      >
    </view>
    <view class="tab-panel">
      <view class="panel0" v-if="currentTabIndex == 0">
        <view class="top">
          <view class="top-t">
            <view class="top-t__label">总资产</view>
            <view class="top-t__value red">{{ totalAmount }}</view>
          </view>
          <view class="top-b">
            <view class="top-b-t">
              <view class="top-b-t-l">
                <text class="label">可用资金</text>
                <text class="value">{{ allowedAmount }}</text>
              </view>
              <view class="top-b-t-r">
                <text class="label">持仓市值</text>
                <text class="value">{{ holdingAmount }}</text>
              </view>
            </view>
            <view class="top-b-b">
              <text class="label">浮动盈亏</text>
              <text class="value" :class="{ green: isDecrease }">
                {{ floatingProfit }}
              </text>
            </view>
          </view>
        </view>
        <view class="middle">
          <view class="row title">
            <view class="col1">名称/信用金</view>
            <view class="col2">盈亏/股数</view>
            <view class="col3">买入/现价</view>
            <view class="col4">止盈/止损</view>
          </view>
          <view class="scroll1">
            <view
              class="border-bottom"
              v-for="(item, index) in list"
              :key="index"
            >
              <view class="row" @click="toggleShowItem(index)">
                <view class="col1 flex-column">
                  <text class="name">{{ item.name }}</text>
                  <text class="creditGold">{{ item.creditGold }}</text>
                </view>
                <view class="col2">
                  <text class="l-txt" :class="{ green: item.isDecreaseIncome }">
                    {{ item.profitAndLoss }} </text
                  >/
                  <text class="r-txt">{{ item.stockNum }}</text>
                </view>
                <view class="col3">
                  <text class="l-txt">{{ item.buyIn }}</text
                  >/
                  <text class="r-txt" :class="{ green: item.isDecreasePrice }">
                    {{ item.currentPrice }}
                  </text>
                </view>
                <view class="col4">
                  <text class="l-txt">{{ item.stopEarnValue }}</text
                  >/
                  <text class="r-txt">{{ item.stopLossValue }}</text>
                </view>
              </view>
              <view class="row button-group" v-show="item.show">
                <view class="col1 btn red" @click="saleOut(item)">卖出</view>
                <view class="col2 btn red" @click="stopEarnAndLoss(item)"
                  >止盈止损</view
                >
                <view class="col3 btn red" @click="addCreditGold(item)"
                  >追加信用金</view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="panel1" v-if="currentTabIndex == 1">
        <view class="middle">
          <view class="row title">
            <view class="col1">名称/信用金</view>
            <view class="col2">盈亏/股数</view>
            <view class="col3">买入/卖出</view>
            <view class="col4">建仓费/递延费</view>
          </view>
          <view class="scroll2">
            <view
              class="row border-bottom"
              v-for="(item, index) in historyList"
              :key="index"
            >
              <view class="col1 flex-column">
                <text class="name">{{ item.name }}</text>
                <!-- <text class="creditGold">{{ item.creditGold }}</text> -->
              </view>
              <view class="col2">
                <text class="l-txt"> {{ item.profitAndLoss }} </text>/
                <text class="r-txt">{{ item.stockNum }}</text>
              </view>
              <view class="col3">
                <text class="l-txt">{{ item.buyIn }}</text
                >/
                <text class="r-txt" :class="{ green: item.isDecreasePrice }">
                  {{ item.currentPrice }}
                </text>
              </view>
              <view class="col4">
                <text class="l-txt">{{ item.constructionCost }}</text
                >/
                <text class="r-txt">{{ item.deferredCost }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        currentTabIndex: 0,
        totalAmount: 2134453.24,
        allowedAmount: 12342343.22,
        holdingAmount: 12344.43,
        floatingProfit: "-32",
        isDecrease: true,
        list: [
          {
            id: 1,
            name: "中国通号",
            creditGold: "231.20",
            isDecreaseIncome: true,
            profitAndLoss: "-23",
            stockNum: 1500,
            buyIn: "6.32",
            currentPrice: "6.19",
            stopEarnValue: "8.07",
            stopLossValue: "5.23"
          },
          {
            id: 2,
            name: "中国通号",
            creditGold: "231.20",
            isDecreaseIncome: true,
            profitAndLoss: "-23",
            stockNum: 1500,
            buyIn: "6.32",
            currentPrice: "6.19",
            stopEarnValue: "8.07",
            stopLossValue: "5.23"
          }
        ],
        currentShowId: '', // 记录点击展开的那条记录id
      };
    },
    methods: {
      changeTab(index) {
        this.currentTabIndex = index;
      },
      toggleShowItem(index) {
        this.$set(this.list[index], "show", !this.list[index]["show"]);
        this.currentShowId = this.list[index].id;
      },
      afterGetData() { // 渠道数据后台，
        this.list.forEach(function(item) {
          if(item.id == this.currentShowId){
            item.show = true;
          }
        })
      },
      saleOut(data) {
        console.log("saleOut -> data", data);
      },
      stopEarnAndLoss(data) {},
      addCreditGold(data) {}
    }
  };
</script>

<style lang="scss" scoped>
  @import "@/common/scss/mixin.scss";
  .green {
    color: green !important;
  }
  .red {
    color: red;
  }
  .tab {
    @include flex();
    padding: 20upx;
    font-size: 34upx;
    &-item {
      flex: 1;
      text-align: center;
      &.active {
        border-bottom: 4upx solid red;
      }
    }
  }
  [class^="panel"] {
    background: #f5f5f5;
    font-size: 30upx;
    .top {
      @include flex(flex-start, column, flex-start);
      padding: 20upx 20upx 0;
      background: #fff;
      .label {
        padding-right: 10upx;
      }
      &-b {
        @include flex(flex-start, column, flex-start);
        width: 100%;
        border-top: 2upx solid #f5f5f5;
        &-t {
          flex: 1;
          @include flex();
          padding: 15upx 0;
          &-l {
          }
          &-r {
            padding-left: 50upx;
          }
        }
        &-b {
          flex: 1;
        }
      }
    }
    .middle {
      .row {
        @include flex(space-between, row, center);
        padding: 20upx;
        background: #fff;
      }
      .title {
        margin: 20upx 0;
      }
      .flex-column {
        @include flex(center, column, center);
      }
      .creditGold {
        font-size: 24upx;
        color: #333;
      }
      .button-group {
        .btn {
          padding: 8upx 15upx;
          border: 2upx solid #d9d5d5;
          border-radius: 20upx;
        }
      }
    }
  }
  .scroll1 {
    height: calc(100vh - 506upx);
    overflow-y: auto;
  }
  .scroll2 {
    height: calc(100vh - 296upx);
    overflow-y: auto;
  }
  .mg0 {
    margin: 0 !important;
  }
  .border-bottom {
    border-bottom: 2upx solid #f5f5f5;
  }
</style>
